<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style type="text/css">
        #Container {
            width: 1000px;
            margin:0 auto;
            background: #CF3;
        }

        #Header{
            height: 80px;
            background: #093;
        }

        #logo{
            padding-left: 50px;
            padding-top: 20px;
            padding-bottom: 50px;
        }

        #Content{
            height: 600px;
            margin: 20px 0 0 0;
            background: #00FFFF;
        }

        #Content-Left{
            height: 400px;
            width: 200px;
            margin: 20px;
            float: left;
            background: #9900CC;
        }

        #Content-Main{
            height: 400px;
            width:720px;
            margin:20px;/*设置元素跟其他元素的距离为20像素*/
            float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
            background:#90C;
        }

        #Footer{
            height:40px;
            background:#90C;
            margin-top:20px;
        }

        .Clear{
            clear:both;
        }
    </style>
</head>
<body>
<div id="Container">
    <div id="Header">
        <div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>
    </div>
    <div id="Content">
        <div id="Content-Left">Content-Left</div>
        <div id="Content-Main">Content-Main</div>
    </div>
    <div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。-->
    </div>
    <div id="Footer">Footer</div>
</div>
</body>
</html>